<template>
	<view class="pagr_art_detail">
		<!-- 		<view class="h1">{{title}}</view>
		<view class="sub_tips">
			<text class="auto">{{publisher}}</text>
			<text class="time">{{createTime}}</text>
		</view> -->
		<!-- 		<block v-if="content!== null" >
			<rich-text :nodes="content" class="rich_text"></rich-text> 
		</block> -->
		<view class="wz-info">
			<!-- 标题 -->
			<view class="title">{{detail.title}}</view>
			<!-- 作者 -->
			<view class="flex-align author-info">
				<text class="author">{{detail.publisher}}</text>
				<text class="date">{{detail.createTime}}</text>
			</view>
		</view>
		<view class="fwb">
			<!-- <view class="" v-html="content"></view> -->
			<rich-text :nodes="content" style="word-break:break-all;"></rich-text>
		</view>
		<!-- <u-parse :content="content" @preview="preview"></u-parse> -->
		<comment v-if="detail.id" :detail="detail" :type="1"></comment>
		<!-- <discussFixed v-if="relData.id && show " :forumId="relData.id" :isPraise="relData.isPraise" :replyNum="relData.replyNum"
			:praiseNum="relData.praiseNum" :tieType="1"></discussFixed> -->
	</view>
</template>

<script>
	import uParse from "@/components/feng-parse/parse.vue";
	import comment from '@/components/comment1/index.vue'
	import parseHtml from './html-parser'
	export default {
		data() {
			return {
				title: "",
				createTime: "",
				publisher: "",
				content: "",
				relData: {},
				show: false,
				detail: {},
			}
		},
		components: {
			uParse,
			comment
		},
		onLoad(parmas) {
			this.getArtDetail(parmas.id)
		},
		methods: {
			preview(obj) {
				console.log(obj)
			},
			//获取文章详情
			async getArtDetail(id) {
				let resData = await this.$api.getArtDetail(id);
				let data = resData.data.data;
				this.detail = data;
				console.log(data.content);
				this.title = data.title;
				this.createTime = data.createTime
				this.publisher = data.publisher;
				this.content = data.content;


				var px = uni.upx2px(60)
				// this.content = parseHtml(data.content.replace(/\<img/gi,
				// '<img style="max-width:calc(100% - 30px);height:auto;display:block; margin:0 auto" '));

				this.relData.id = data.id;
				this.relData.praiseNum = data.praiseNum;
				this.relData.isPraise = data.isPraise;
				this.relData.replyNum = data.replyNum;
				setTimeout(() => {
					this.show = true
				}, 1000)
			}
		}
	}
</script>
<style>
	page {
		padding-bottom: 100rpx;
		min-height: 100%;
	}

	.fwb {
		max-width: 350px;
	}

	.fwb img {
		/* width: calc(100% - 10px) !important; */
	}
</style>
<style lang="scss" scoped>
	.fwb span {
		display: block;
		padding-right: 30rpx !important;
	}

	.title {
		font-size: 38rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 44rpx;
	}

	.author-info {
		margin-bottom: 74rpx;
	}

	.author {
		font-size: 28rpx;
		color: #585CF7;
		display: inline-block;
		margin-right: 26rpx;
	}

	.date {
		font-size: 28rpx;
		color: #999999;
	}

	.pagr_art_detail {
		// width: 690rpx;
		// margin: 0 auto;
		// padding: 10px 30rpx 0;
		background-color: #fff;
		box-sizing: border-box;
		position: absolute;
	}

	.wz-info {
		padding: 10px 30rpx 0;
	}

	// .fwb {
	// 	// padding: 0 0 0 15px ;
	// 	margin: 0 auto;
	// }
	.fwb {
		padding: 0 0 0 15px;
		// margin: 0 auto;
		// text-align: center;

	}
</style>
